<template>
	<view class="container">
		<view class="u-tabs-box">
			<view class="swiper">
				<view class="swiper-item" @click="change(0)" :class="{'border':!swiperCurrent}">支出</view>
				<view class="swiper-item" @click="change(1)" :class="{'border':swiperCurrent}">收入</view>
			</view>
			<!-- <u-tabs-swiper activeColor="#AB62FF" ref="tabs" :list="list" :current="current" @change="change" :isShowBadge="false" :active-item-style="{color:'#AB62FF'}" :is-scroll="true" swiperWidth="750"></u-tabs-swiper> -->
		</view>
		<swiper class="swiper-box"  @change="toggle" :current="swiperCurrent">
			<swiper-item class="swiper-item" v-for="(v,i) in list" :key="i">
				<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom">
					<view class="list" v-if="list[i] && list[i].length">
						<view class="item" v-for="(item,index) in list[i]" :key="index">
							<view class="left">
								<view class="dot"></view>
							</view>
							<view class="center">
								<view class="title">{{item.remark}}</view>
								<view class="time">{{item.createTime}}</view>
							</view>
							<view class="right">
								<view class="amount"><block v-if="swiperCurrent < 1">-</block>{{item.num}}</view>
							</view>
						</view>
					</view>					
					<view class="u-flex u-row-center u-m-50" v-else style="flex-direction: column;">
						<view><image style="width:300rpx;height:300rpx;margin-top:50rpx;" mode="widthFix" src="../../../static/img/no.png"></image></view>
						<view>暂无数据</view>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				active: true,
				reqBody:{
					index:1,
					size:10
				},
				list: [
					{
						name: '支出'
					},
					{
						name: '收入'
					}
				],
				current: 0,
				swiperCurrent: 0,
				tabsHeight: 0,
				dx: 0,
				loadStatus: ['loadmore','loadmore'],
			}
		},
		onShow(){
			this.getList(0);
			this.getList(1);
		},
		methods: {
			async getList(type,index){
				this.reqBody.type = type;
				let {data} = await this.$apis.coinLogPage(this.reqBody);
				if(index){
					this.list[type] = this.list[type].concat(data.content);
				}else{
					this.list[type] = data.content;
				}
				this.$forceUpdate()
				console.log("===type---",type)
				console.log("list",this.list);
			},
			handleClickItem(){
				this.$mRouter.push({
					route: this.$mRoutesConfig.recordDetail
				})
			},		
			reachBottom() {
				// 此tab为空数据
				this.reqBody.index ++ ;
				this.loadStatus.splice(this.current,1,"loading")
				setTimeout(() => {
					this.getList(this.current,this.reqBody.index);
				}, 1200);
			},
			// tab栏切换
			change(index) {
				this.swiperCurrent = index;
				this.getList(index);
			},
			toggle(e){
				this.swiperCurrent = e.detail.current;;
			}
		}
	}
</script>

<style scoped lang="scss">
	page {
		background-color: #f0f0f0;
	}

	.container {
		padding: 0;

		.swiper {
			width: 100%;
			height: 80upx;
			display: flex;
			background-color: #fff;
			justify-content: space-around;
			align-items: center;
			padding: 0 60upx;
		
			.swiper-item {
				height: 60upx;
				padding: 0 10upx;
			}
		
			.border {
				color: #AB62FF;
				font-weight: 800;
				border-bottom: #AB62FF solid 4upx;
				border-radius: 2upx;
			}
		}
		

		.list {
			width: 100%;
			margin-top: 20upx;
			padding: 0 30upx;

			.item {
				width: 690upx;
				height: 130upx;
				background-color: #fff;
				border-radius: 20upx;
				margin-bottom: 20upx;
				display: flex;
				padding: 0 24upx;
				justify-content: space-between;

				.right {
					display: flex;
					align-items: center;
					width: 130upx;

					.amount {
						width: 100%;
						color: #AB62FF;
						font-size: 34upx;
						text-align: right;
						margin-right: 15upx;
					}
				}

				.center {
					margin-left: 24upx;
					display: flex;
					flex-direction: column;
					padding: 26upx 0;
					justify-content: space-between;
					flex: 1;

					.title {
						color: #0E1E36;
						font-size: 32upx;
					}

					.time {
						color: #888E9A;
						font-size: 26upx;
					}
				}

				.left {
					display: flex;
					align-items: center;

					.dot {
						width: 14upx;
						height: 14upx;
						border-radius: 50%;
						background: linear-gradient(0deg, #30CE94, #72E07C);
					}

					.dot2 {
						width: 14upx;
						height: 14upx;
						border-radius: 50%;
						background: linear-gradient(0deg, #FF663D, #FFAB0A);
					}
				}
			}
		}
	}
	.swiper-box {
		flex: 1;
	}
	.swiper-item {
		height: 100%;
	}
	.u-tabs-box {display: flex;justify-content: space-around;}
</style>
